<!DOCTYPE html>
<html>
    <head>
        <title>拉新排行榜</title>
        <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
        <script src="/unpkg/unpkg.vue.js"></script>
        <script src="/unpkg/lib-master/index.js"></script>
        <script src="/unpkg/unpkg.axios.min.js"></script>
        <script src="/cdn/echarts.min4.8.js"></script>
    </head>
    <body>
        <div id="app">
            <el-card class="box-card">
                <div slot="header" class="clearfix"><span>基本信息</span></div>
                <el-row>
                    <el-col :span="12">
                        <el-descriptions class="margin-top" :column="1">
                            <el-descriptions-item label="规则名称">!{!{detail.title}}</el-descriptions-item>
                            <el-descriptions-item label="排行指标">!{!{detail.top_type==1?'邀请客户成为企微客户':'根据客户加入群聊'}}</el-descriptions-item>
                            <el-descriptions-item label="新增客户去重">!{!{detail.is_diff==1?'去重':'不去重'}}</el-descriptions-item>
                            <el-descriptions-item label="活动时间">
                                !{!{detail.start_time}}  ~  !{!{detail.end_time}}
                            </el-descriptions-item>
                            <el-descriptions-item label="参与成员" v-if="detail.top_type==1">
                                <template>
                                    <el-tag effect="plain" size="mini" class="user" v-for="user in detail.users.slice(0,6)" :key="user.id">!{!{user.name}}</el-tag>
                                    <span v-if="detail.users.length > 6">等!{!{detail.users.length}}人参与</span>
                                </template>
                            </el-descriptions-item>
                            <el-descriptions-item label="生效群聊" v-if="detail.top_type==2">
                                <template>
                                    <el-tag effect="plain" size="mini" class="user" v-for="chat in detail.chats.slice(0,3)" :key="chat.id">!{!{chat.name}}</el-tag>
                                    <span v-if="detail.chats.length > 3">等!{!{detail.chats.length}}个群聊</span>
                                </template>
                            </el-descriptions-item>
                            <el-descriptions-item label="上榜名次">!{!{detail.top_times}}</el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                    <el-col :span="12">
                        <el-descriptions class="margin-top" :column="2">
                            <el-descriptions-item label="活动说明">
                                <el-input type="textarea" :rows="10" :cols="100" style="width: 100%;" :value="detail.description" :disabled="true"></el-input>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div id="top1" style="width: 100%;height:400px;"></div>
            </el-card>
            <el-card>
                <div style="margin: 20px 0;">
                    <el-select v-model="search.user" placeholder="选择成员" clearable v-if="detail.top_type==1"  @change="selecthandle">
                        <el-option
                            v-for="user in detail.users"
                            :key="user.id"
                            :label="user.name"
                            :value="user.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="search.group" placeholder="选择群聊" clearable v-if="detail.top_type==2" @change="selecthandle">
                        <el-option
                            v-for="chat in detail.chats"
                            :key="chat.id"
                            :label="chat.name"
                            :value="chat.id">
                        </el-option>
                    </el-select>
                </div>
                <el-table :data="userData" style="width: 100%" >
                    <el-table-column type="index" width="100" label="排名"></el-table-column>
                    <el-table-column prop="name" label="成员" v-if="detail.top_type==1"></el-table-column>
                    <el-table-column prop="name" label="群名称" v-if="detail.top_type==2"></el-table-column>
                    <el-table-column prop="department_name" label="所在部门" v-if="detail.top_type==1"></el-table-column>
                    <el-table-column prop="size" label="邀请客户数"></el-table-column>
                    <el-table-column prop="size" label="净增客户数"></el-table-column>
                </el-table>
                <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="paged"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                </el-pagination>
            </el-card>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data() {
                    return {
                        id: "{$_GET['id']}",
                        detail: {},
                        TableType: 'times',
                        userData:[],
                        paged:1,
                        sizes:10,
                        total: 0,
                        search:{
                            user:null,
                            group:null,
                            dateRange:[]
                        }
                    }
                },
                mounted() {
                    this.getDetail()
                },
                methods: {
                    getDetail(){
                        let loading = this.$loading(!{text: '请稍等...'});
                        let charts = []
                        axios.get('/Addons/NewPerson/Admin/InviatePerson/getDetail.html',!{params: !{id:this.id}}).then( resp => {
                            this.detail = resp.data.data
                            if( this.detail.top_type == 1 ) charts =  this.detail.users
                            if( this.detail.top_type == 2 ) charts =  this.detail.chats
                            let totals = this.detail.totals
                            let utime = this.detail.update_at
                            this.getData()
                            this.drawChartBar(charts,totals,utime);
                            loading.close();
                        }).catch( error => {
                            loading.close();
                            this.$message.error('错误')
                        });
                    },
                    getData(){
                        let type =  this.detail.top_type == 1 ? 'users' : 'group'
                        axios.get('/Addons/NewPerson/Admin/InviatePerson/get_data.html',!{
                            params: {
                                id: this.detail.id,
                                users:this.search.user,
                                group: this.search.group,
                                type: type,
                                paged: this.paged,
                                sizes: this.sizes,
                                start_time: this.start_time,
                                end_time: this.end_time
                            }
                        }).then( resp => {
                           this.userData = resp.data.data.items
                           this.total = resp.data.data.count
                        })
                    },
                    handleCurrentChange(paged){
                        this.paged = paged
                    },
                    selecthandle(val){
                        this.getData()
                    },
                    drawChartBar(charts,totals,utime) {
                        let top1 = document.getElementById('top1');
                        let myChart = echarts.init(top1);
                        let listener = function() { myChart.resize() }
                        window.addEventListener('resize', listener)
                        let option = {
                            title:{
                                text:'排行榜TOP10',
                                subtext:'Top10邀请客户数总计：'+totals+'   |    更新时间：'+utime,
                                subtextStyle:{
                                    fontSize: 14,
                                    lineHeight: 34,
                                }
                            },
                            color: ["#5b8ff9"],
                            tooltip: { 
                                trigger: 'axis'
                            },
                            grid: {
                                top: '100px',
                                left: '20px',
                                right: '20px',
                                bottom: '20px',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                data: charts.map(item=> !{ return item.name } ),
                                axisLabel: {
                                   formatter: function (params) {
                                        var val = "";
                                        if (params.length > 4) {
                                            val = params.substr(0, 4) + '...';
                                            return val;
                                        } else {
                                            return params;
                                        }
                                   }
                                }
                            },
                            yAxis: {
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                },
                                type: 'value'
                            },
                            series: [{
                                name:'邀请客户数',
                                data: charts.map(item => !{ return item.size } ),
                                type: 'bar',
                                barWidth: '50px',
                            }]
                        };
                        myChart.setOption(option);
                    },
                }
            })
        </script>
        <style>
            .el-page-header{
                background: #ffffff;
                padding: 20px;
                -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
                box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            }
            .el-card{
                margin-top: 20px;
            }
            span.user{
                margin-right:15px;
            }
        </style>
    </body>
</html>
